<template>
  <div>
    <!--按钮-->
    <div class="btn-box">
      <el-button type="primary" size="small" @click="showFrom">添加</el-button>
      <el-button type="success" size="small" @click="saveBatch">保存</el-button>
      <el-button type="danger" size="small" @click="delItems">删除</el-button>
      <el-button type="info" size="small" @click="toggleSelection()">取消选择</el-button>
    </div>
    <!--数据-->
    <div class="data-box">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">

        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          prop="sort"
          label="排序号"
          width="100">
        </el-table-column>

        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>

        <el-table-column
          label="头像"
          width="120">
          <template slot-scope="scope"><img :src="scope.row.avatar" alt="" class="img-box"></template>
        </el-table-column>

        <el-table-column
          label="头衔"
          width="120">
          <template slot-scope="scope">{{scope.row.level === 1 ? '高级讲师' : '首席讲师'}}</template>
        </el-table-column>

        <el-table-column
          prop="career"
          label="资历"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="intro"
          label="简介"
          show-overflow-tooltip>
        </el-table-column>

      </el-table>
    </div>
    <!--对话框-->
    <div>
      <el-dialog title="讲师信息" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        <el-form :model="teacher" ref="teacher">

          <el-form-item label="讲师头像" :label-width="formLabelWidth">
            <div class="avatar-box">
              <el-upload
                class="avatar-uploader"
                action="http://127.0.0.1:8002/eduoss/fileoss"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="teacher.avatar" :src="teacher.avatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>

          </el-form-item>

          <el-form-item label="排序号" :label-width="formLabelWidth"
                        prop="sort"
                        :rules="[
                                  { required: true, message: '排序号不能为空'},
                                  { type: 'number', message: '排序号必须为数字值'}
                                ]"
          >
            <el-input v-model.number="teacher.sort" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="讲师名称" :label-width="formLabelWidth"
                        prop="name"
                        :rules="[
                                  { required: true, message: '讲师名称不能为空'}
                                ]"
          >
            <el-input v-model="teacher.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="讲师头衔" :label-width="formLabelWidth"
                        prop="level"
                        :rules="[
                                  { required: true, message: '讲师头衔不能为空'}
                                ]"
          >
            <el-select v-model="teacher.level" placeholder="请选择讲师头衔">
              <el-option label="高级讲师" :value="1"></el-option>
              <el-option label="首席讲师" :value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="讲师资历" :label-width="formLabelWidth">
            <el-input v-model="teacher.career" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="讲师简介" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="讲师简介"
              v-model="teacher.intro">
            </el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('teacher')">添加到临时列表</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import teacher from "@/api/edu/teacher";

  export default {
    data() {
      return {
        tableData: [],
        multipleSelection: [],
        dialogFormVisible: false,
        teacher: {
          id: '',
          name: '',
          intro: '',
          career: '',
          level: '',
          avatar: '',
          sort: '',
        },
        formLabelWidth: '120px'
      }
    },
    methods: {

      // 01 取消选择
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      // 02 上传头像
      handleAvatarSuccess(res, file) {
        this.teacher.avatar = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      // 04 添加一个讲师
      showFrom() {
        this.teacher = {
          id: '',
          name: '',
          intro: '',
          career: '',
          level: '',
          avatar: '',
          sort: '',
        }
        teacher.getNextSort().then(response => {
          this.teacher.sort = response.data.sort
          this.dialogFormVisible = true
        }).catch(error => {
          this.dialogFormVisible = true
        })
      },

      // 05 删除
      delItems() {
        if (this.multipleSelection.length == 0) {
          this.$message("请选择删除项")
          return
        }
        this.$confirm('此操作将删除所选数据数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var temp = []
          this.tableData.forEach(teacher => {
            if (this.multipleSelection.indexOf(teacher) === -1) {
              temp.push(teacher)
            }
          })
          this.tableData = temp
          this.multipleSelection = []
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
      },

      // 06 批量保存
      saveBatch() {
        if (this.multipleSelection.length == 0) {
          this.$message("请选择保存项")
          return
        }
        this.$confirm('确定批量保存所选数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teacher.saveBatchTeacher(this.multipleSelection).then(response => {
            this.$message({
              type: 'success',
              message: '保存成功!',
            });
          })
        })
      },

      // 07 检验并添加到临时列表
      submitForm(teacher) {
        this.$refs[teacher].validate((valid) => {
          if (valid) {
            var temp = {...this.teacher}
            temp.id = new Date().getTime();
            this.tableData.push(temp)
            this.$confirm('是否继续添加?', '提示', {
              confirmButtonText: '是',
              cancelButtonText: '否',
              type: 'warning'
            }).then(() => {
              this.teacher = {}
            }).catch(() => {
              this.dialogFormVisible = false
            })
            return true;
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    width: 100px;
    height: 100px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .data-box {
    margin: 0 15px 15px 15px;
    border: #f4f4f5 1px solid;
  }

  .btn-box {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    margin: 5px 15px 5px 15px;
    border: #f4f4f5 1px solid;
  }

  .img-box {
    width: 50px;
    height: 50px;
  }
</style>
